<!DOCTYPE html>
<html>
<head>
  <title>maptalks.heatmap demo</title>
  <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css">
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.min.js"></script>
  <script type="text/javascript" src="../dist/maptalks.heatmap.js"></script>
  <script type="text/javascript" src="realworld.10000.js"></script>
  <style>
    html,body{
        margin:0px;
        height:100%;
        width: 100%;
    }
    #map { width: 100%; height: 100%; }
  </style>
</head>
<body>
<div id="map"></div>
<script>
//Inspired by Leaflet.Heat
//https://github.com/Leaflet/Leaflet.heat

var map = new maptalks.Map("map",{
    center : [175.46873, -37.90258],
    zoom   :  15,
    attributionControl : {
      'content' : '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    },
    baseLayer : new maptalks.TileLayer('tile',{
        urlTemplate: 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png',
        subdomains: ['a','b','c','d']
    })
});

var data = addressPoints.map(function (p) { return [p[1], p[0]]; });
var heatlayer = new maptalks.HeatLayer('heat', data, {
    'heatValueScale': 0.7,
    'forceRenderOnRotating' : true,
    'forceRenderOnMoving' : true
}).addTo(map);

</script>
</body>
</html>
